<template>
    <div v-if="route.name == 'historicalDisasterInformation'" class="mt20">
        <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="100px" v-show="showSearch">
            <el-form-item label="日期">
                <el-form-item label-width="0px" prop="startTime">
                    <el-date-picker style="width:140px" v-model="queryParams.startTime" type="date" placeholder="开始时间"
                        value-format="YYYY-MM-DD" :disabled-date="startDisableDate"/>
                </el-form-item>
                <span class="spanStyle">至</span>
                <el-form-item label-width="0px" prop="endTime">
                    <el-date-picker style="width:140px" v-model="queryParams.endTime" type="date" placeholder="结束时间"
                        value-format="YYYY-MM-DD" :disabled-date="endDisableDate"/>
                </el-form-item>
            </el-form-item>
            <el-form-item label="地点">
                <el-select style="width:140px;margin-right:20px" v-model="queryParams.province" value-key="id"
                    placeholder="请选择" @change="chooseProvince" clearable>
                    <el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item">
                    </el-option>
                </el-select>
                <el-select style="width:140px;margin-right:20px" v-model="queryParams.city" value-key="id" placeholder="请选择"
                    @change="chooseCity" clearable>
                    <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item">
                    </el-option>
                </el-select>
                <el-select style="width:140px;margin-right:20px" v-model="queryParams.county" value-key="id"
                    placeholder="请选择" @change="chooseCounty" clearable>
                    <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item">
                    </el-option>
                </el-select>
                <!-- <el-select style="width:140px;" v-model="queryParams.town" placeholder="请选择" clearable>
                    <el-option v-for="item in []" :key="item.id" :label="item.name" :value="item.name">
                    </el-option>
                </el-select> -->
            </el-form-item>
            <el-form-item label="震级" prop="startMagnitude">
                <el-form-item label-width="0px" prop="startMagnitude">
                    <el-input style="width:140px" v-model="queryParams.startMagnitude" placeholder="请输入" />
                </el-form-item>
                <span class="spanStyle">~</span>
                <el-form-item label-width="0px" prop="endMagnitude">
                    <el-input style="width:140px" v-model="queryParams.endMagnitude" placeholder="请输入" />
                </el-form-item>
            </el-form-item>
            <el-form-item label="经度" prop="longitude">
                <el-form-item label-width="0px" prop="longitude">
                    <el-input style="width:140px" v-model="queryParams.longitude" placeholder="请输入" />
                </el-form-item>
                <span class="spanStyle">~</span>
                <el-form-item label-width="0px" prop="longitude1">
                    <el-input style="width:140px" v-model="queryParams.longitude1" placeholder="请输入" />
                </el-form-item>
                <!-- <el-input style="width:300px" v-model="queryParams.longitude" placeholder="请输入经度" clearable /> -->
            </el-form-item>
            <el-form-item label="纬度" prop="latitude">
                <el-form-item label-width="0px" prop="latitude">
                    <el-input style="width:140px" v-model="queryParams.latitude" placeholder="请输入" />
                </el-form-item>
                <span class="spanStyle">~</span>
                <el-form-item label-width="0px" prop="latitude1">
                    <el-input style="width:140px" v-model="queryParams.latitude1" placeholder="请输入" />
                </el-form-item>
                <!-- <el-input style="width:300px" v-model="queryParams.latitude" placeholder="请输入纬度" clearable /> -->
            </el-form-item>
            <el-row>
                <el-col style="text-align: center">
                    <el-form-item>
                        <el-button type="primary" @click="handleQuery">查询</el-button>
                        <el-button type="primary" @click="resetQuery">清空</el-button>
                        <el-button type="primary" :disabled="multiple" @click="handleExport">目录下载</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-table v-loading="loading" ref="tableRef" :data="dataList" stripe @selection-change="handleSelectionChange"
            row-key="jedsId" style="margin-bottom: 20px;">
            <el-table-column type="selection" width="55" align="center" :reserve-selection="true" />
            <el-table-column label="地震事件简称" align="center" prop="eventAbbreviation" show-overflow-tooltip />
            <el-table-column label="参考位置" align="center" prop="referencePosition" show-overflow-tooltip />
            <el-table-column label="日期" align="center" prop="jedsDate" show-overflow-tooltip />
            <el-table-column label="经度（°）" align="center" prop="jedsLongitude" show-overflow-tooltip />
            <el-table-column label="纬度（°）" align="center" prop="jedsLatitude" show-overflow-tooltip />
            <el-table-column label="震级" align="center" prop="magnitude" show-overflow-tooltip />
            <el-table-column label="震源深度（km）" align="center" prop="depth" show-overflow-tooltip />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.rows"
            @pagination="getList" />
    </div>
    <div v-else>
        <router-view></router-view>
    </div>
</template>
  
<script setup name="historicalDisasterInformation">
import { getUserId, getToken } from '@/utils/auth'
import { getProvince, getChildArea } from "@/api/system/division";
import { getAllList, } from '@/api/informationRetrieval/historicalSeismicInformation.js'
import {useWebsocket} from "@/utils/socket"
const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
const dataList = ref([]);
const ids = ref([]);
const loading = ref(false);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const showSearch = ref(true);
const provinceData = ref([]);//省
const cityData = ref([]);//市
const areaData = ref([]); //区、县

const data = reactive({
    queryParams: {
        page: 1,
        rows: 10,
        startTime: undefined,
        endTime: undefined,
        startMagnitude: undefined,
        endMagnitude: undefined,
        province: undefined,
        city: undefined,
        county: undefined,
        town: undefined,
        county: undefined,
        releaseStatus: undefined,
        longitude: undefined,
        longitude1: undefined,
        latitude: undefined,
        latitude1: undefined,
        releaseStatus:'0',
    },
})
const { queryParams, } = toRefs(data);


// 查看
function handleDetail(row) {
    router.push({
        path: "/informationRetrieval/historicalSeismicInformation/historicalDisasterInformation/historicalDisasterDataDatil",
        query: {
            id: row.jedsId,
        }
    })
}

/** 导出按钮操作 */
function handleExport() {
    proxy.download(`/earthquakeDisaster/exportData/${ids.value.join(',')}`, {}, `地震灾害信息${new Date().getTime()}.xls`)
}

/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.page = 1;
    getList();
}

/** 重置按钮操作 */
function resetQuery() {
    proxy.resetForm("queryRef");
    queryParams.value.province = undefined;
    queryParams.value.city = undefined;
    queryParams.value.county = undefined;
    queryParams.value.endMagnitude = undefined;
    queryParams.value.longitude1 = undefined;
    queryParams.value.latitude1 = undefined;
    handleQuery();
}

/** 查询数据列表 */
function getList() {
    loading.value = true;
    getAllList({ ...queryParams.value }).then(response => {
        dataList.value = response.data.rows ? response.data.rows : [];
        total.value = response.data.total;
        loading.value = false;
    });
}

// 多选框选中数据
function handleSelectionChange(selection) {
    ids.value = selection.map(item => item.jedsId);
    single.value = selection.length != 1;
    multiple.value = !selection.length;
}


function chooseProvince(value) {
    queryParams.value.province = value.name;
    queryParams.value.city = null;
    queryParams.value.county = null;
    cityData.value = [];
    getChildArea(value.id).then(response => {
        cityData.value = response.data;
    });
}

function chooseCity(value) {
    queryParams.value.city = value.name;
    queryParams.value.county = null;
    areaData.value = [];
    getChildArea(value.id).then((response) => {
        areaData.value = response.data;
    });
}
function chooseCounty(value) {
    queryParams.value.county = value.name;
}

/** 获取省列表 */
function getProvinceData() {
    getProvince().then(response => {
        provinceData.value = response.data;
    });
}

// 时间可选范围控制
const startDisableDate = (time) => {
	let endDateVal = queryParams.value.endTime;
	if (endDateVal) {
		return time.getTime() > new Date(endDateVal).getTime();
	}
};
const endDisableDate = (time) => {
	let beginDateVal = queryParams.value.startTime;;
	if (beginDateVal) {
		return time.getTime() < new Date(beginDateVal).getTime();
	}
};

function getListDetail() {
    if (route.name == 'historicalDisasterInformation') {
        getList();
    } else {
        // getDetail(route.query.id)
    }
}
// WebSocket
const ws = useWebsocket()
ws.onmessage = (e) => {
    if(JSON.parse(e.data).moduleType=='earthquakeDisaster'){
        if (route.name == 'historicalDisasterInformation') {
            getAllList({ ...queryParams.value }).then(response => {
                dataList.value = response.data.rows ? response.data.rows : [];
                total.value = response.data.total;
            });
        } 
    }
  };

//页面卸载，关闭socket
onUnmounted(() => {
  ws.close();
});
getListDetail();
getProvinceData();
</script>
  
<style lang="scss" scoped>
.tab-title {
    font-size: 16px;
    font-weight: bold;
    border-left: 4px solid #0D9AFF;
    font-family: PingFangSC-Medium;
    padding-left: 10px;
    margin-bottom: 20px;
}

:deep(.el-drawer__header) {
    margin-bottom: 0px !important;
}

.el-form--inline .el-form-item {
    margin-right: 0px !important;
}

.spanStyle {
    display: inline-block;
    width: 20px;
    text-align: center;
}

:deep(.el-table__expand-icon) {
    display: none;
}
</style>
  